<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @Launchform="Launchform" @findClicked="findClicked" />
    <div class="container">
      <el-card class="containerCard" shadow="always" :body-style="{ padding: '0' }">
        <div style="display: flex">
          <!-- 左 -->
          <div class="containerCardLeft">
            <div class="containerCardLeftHeader">
              <h1 class="containerCardLeftHeaderH1">{{ $t(`Print.PunchingKitStatus`) }}</h1>
              <p class="containerCardLeftHeaderP">{{ $t(`Print.CheckTheGreaterThan0CommandToFilterTheNumberOfMatchingMealsCheckTheCommandToFilterAllSupportingMeals`) }}</p>
              <div class="containerCardLeftHeaderDiv">
                <p>
                  <el-checkbox @change="change2">{{}}</el-checkbox>
                  <el-checkbox @change="change3">{{}}</el-checkbox>
                </p>

                <p class="containerCardLeftHeaderDivP">
                  <el-checkbox @change="change4">{{}}</el-checkbox>
                  <el-checkbox @change="change5">{{}}</el-checkbox>
                </p>

                <p style="margin-left: 60px">
                  <el-checkbox @change="change6">{{}}</el-checkbox>
                  <el-checkbox @change="change7">{{}}</el-checkbox>
                </p>
              </div>
            </div>
            <Table
              :summaryData="summaryData1"
              summary
              :isLoading="isLoading3"
              @currentRow="clicktogetdata"
              :tableData="StoreMainData.dto"
              :tableHeader="tableHeader"
              :TableHeight="100"
              :outTableHeight="100"
            />
          </div>

          <!-- 中 -->
          <div style="margin-top: 20px; margin-left: 15px" class="containerCardMain">
            <h1 class="containerCardLeftHeaderH1">{{ $t(`Print.PunchingKitDetails`) }}</h1>
            <Table
              :summaryData="summaryData2"
              summary
              @currentRow="clicktogetdata1"
              :isLoading="isLoading"
              :tableData="StoreMainDataList.dto"
              :tableHeader="tableHeader2"
              :TableHeight="35"
              :outTableHeight="50"
            />
          </div>

          <!-- 右 -->
          <div class="containerCardRight">
            <h1 style="font-size: 16px; margin-top: 13px">{{ $t(`Print.PartmadePaidinDetails`) }}</h1>

            <div class="containerCardRightDiv">
              <span>{{ $t(`Print.ChooseToMakeIt`) }}:</span>
              <el-select v-model="PartsHaveBeenDetailedParms.processCode" placeholder="选择制程" size="small" style="width: 80px" @change="change">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>

              <el-checkbox @change="change1">{{ $t(`Print.UnmatchedParts`) }}</el-checkbox>
            </div>

            <Table
              :isLoading="isLoading5"
              style="margin-top: 18px"
              :tableData="PartsHaveBeenDetailedTableDate"
              :tableHeader="tableHeader3"
              :TableHeight="93"
              :outTableHeight="100"
            />
          </div>
        </div>
        <!-- 底部按钮 -->
      </el-card>
    </div>
    <PageModule :PageData="{ total: totalT }" @pageChange="handleSizeChangeT" @pageSizeChange="handleCurrentChangeT" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'CuttingAndMatching'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { onMounted, ref, watch } from 'vue'
import { MainSupportingConditions, CuttingAndMatching, PartsHaveBeenDetailed } from '@/api/GeneralManager/Factoryinquiry/CuttingAndMatching'
import type { MainSupportingConditionsInterface } from '@/api/GeneralManager/Factoryinquiry/CuttingAndMatching'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '冲料已配套',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '高频已配套',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '配套仓已配套',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF',
    label: '3'
  },
  {
    type: 'button',
    checkboxLabel: '导出配套资料'
  },
  {
    type: 'dateSingle',
    dateLabel: '报表日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '冲裁达成率'
  }
])

const summaryData1 = ref<any[]>([
  {
    index: 3,
    num: 0
  },
  {
    index: 4,
    num: 0
  },
  {
    index: 5,
    num: 0
  }
])

const summaryData2 = ref<any[]>([
  {
    index: 2,
    num: 0
  },
  {
    index: 3,
    num: 0
  },
  {
    index: 4,
    num: 0
  }
])

// 部位已制明细
const PartsHaveBeenDetailedParms = ref<any>({
  lotNo: '',
  processCode: '',
  sizeNo: '',
  spFlag: ''
})

const change1 = (row: any) => {
  if (row) {
    PartsHaveBeenDetailedParms.value.spFlag = 1
  } else {
    PartsHaveBeenDetailedParms.value.spFlag = -1
  }
  PartsHaveBeenDetailedMethods()
}

const change2 = (row: any) => {
  if (row) {
    SubjectDataParameter.value.gtFlag1 = 1
  } else {
    SubjectDataParameter.value.gtFlag1 = -1
  }
  GetSubjectData()
}

const change3 = (row: any) => {
  if (row) {
    SubjectDataParameter.value.ncFlag1 = 1
  } else {
    SubjectDataParameter.value.ncFlag1 = -1
  }
  GetSubjectData()
}

const change4 = (row: any) => {
  if (row) {
    SubjectDataParameter.value.gtFlag2 = 1
  } else {
    SubjectDataParameter.value.gtFlag2 = -1
  }
  GetSubjectData()
}

const change5 = (row: any) => {
  if (row) {
    SubjectDataParameter.value.ncFlag2 = 1
  } else {
    SubjectDataParameter.value.ncFlag2 = -1
  }
  GetSubjectData()
}

const change6 = (row: any) => {
  if (row) {
    SubjectDataParameter.value.gtFlag3 = 1
  } else {
    SubjectDataParameter.value.gtFlag3 = -1
  }
  GetSubjectData()
}

const change7 = (row: any) => {
  if (row) {
    SubjectDataParameter.value.ncFlag3 = 1
  } else {
    SubjectDataParameter.value.ncFlag3 = -1
  }
  GetSubjectData()
}

const clicktogetdata1 = (row: any) => {
  const { sizeNo } = row
  PartsHaveBeenDetailedParms.value.sizeNo = sizeNo
  if (PartsHaveBeenDetailedParms.value.processCode !== '') {
    PartsHaveBeenDetailedMethods()
  }
}

const isLoading5 = ref(false)

const change = () => {
  PartsHaveBeenDetailedMethods()
}

const options = [
  {
    value: '冲裁',
    label: '冲裁'
  },
  {
    value: '工艺',
    label: '工艺'
  },
  {
    value: '配套',
    label: '配套'
  },
  {
    value: '',
    label: ''
  }
]

const PartsHaveBeenDetailedMethods = async () => {
  isLoading5.value = true
  const result = await PartsHaveBeenDetailed(PartsHaveBeenDetailedParms.value)
  PartsHaveBeenDetailedTableDate.value = result
  isLoading5.value = false
}

const PartsHaveBeenDetailedTableDate = ref([])

const clicktogetdata = (row: any) => {
  const { lotNo } = row || {}
  if (lotNo !== '') {
    CuttingAndMatchingParms.value = lotNo
    PartsHaveBeenDetailedParms.value.lotNo = lotNo
    CuttingAndMatchingDetails()
  }

  if (PartsHaveBeenDetailedParms.value.processCode !== '') {
    PartsHaveBeenDetailedMethods()
  }
}

const CuttingAndMatchingParms = ref()

const isLoading = ref(true)

const CuttingAndMatchingDetails = async () => {
  isLoading.value = true
  const result = await CuttingAndMatching(CuttingAndMatchingParms.value)
  StoreMainDataList.value.dto = result
  result.forEach((dto: any) => {
    summaryData2.value[0].num += Number(dto.cutQty) || 0
    summaryData2.value[1].num += Number(dto.hfQty) || 0
    summaryData2.value[2].num += Number(dto.spQty) || 0
  })
  if (result.length !== 0) {
    PartsHaveBeenDetailedParms.value.sizeNo = result[0].sizeNo
  }
  isLoading.value = false
}

const StoreMainDataList = ref<MainSupportingConditionsInterface>({
  dto: []
})

const SubjectDataParameter = ref<any>({
  gtFlag1: '',
  gtFlag2: '',
  gtFlag3: '',
  lotNo: '',
  ncFlag1: '',
  ncFlag2: '',
  ncFlag3: '',
  pageNum: 1,
  pageSize: 40,
  allFlag1: '',
  allFlag2: '',
  allFlag3: '',
  style: ''
})

const StoreMainData = ref({
  dto: []
})

const isLoading3 = ref(false)

const GetSubjectData = async () => {
  isLoading3.value = true
  const result = await MainSupportingConditions(SubjectDataParameter.value)
  StoreMainData.value.dto = result.dtos

  result.dtos.forEach((dto: any) => {
    summaryData1.value[0].num += Number(dto.cutQty) || 0
    summaryData1.value[1].num += Number(dto.hfQty) || 0
    summaryData1.value[2].num += Number(dto.spQty) || 0
  })

  totalT.value = result.total

  const { lotNo } = result.dtos[0] || {}
  if (lotNo !== '') {
    CuttingAndMatchingParms.value = lotNo
    PartsHaveBeenDetailedParms.value.lotNo = lotNo
    CuttingAndMatchingDetails()
  }
  isLoading3.value = false
}

// 分页器
const totalT = ref()

const handleSizeChangeT = (val: number) => {
  SubjectDataParameter.value.pageNum = val
  GetSubjectData()
}

const handleCurrentChangeT = (val: number) => {
  SubjectDataParameter.value.pageSize = val
  GetSubjectData()
}

// 统一调用接口
const interAceFunct = () => {
  GetSubjectData()
}

onMounted(() => {
  interAceFunct()
})

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    label: '冲裁已配套',
    prop: 'cutQty'
  },
  {
    label: '高频已配套',
    prop: 'hfQty'
  },
  {
    label: '配套数量',
    prop: 'spQty'
  }
])

const tableHeader2 = ref([
  {
    label: '号码',
    prop: 'sizeNo',
    width: '112px'
  },
  {
    label: '订单数量',
    prop: 'orderQty',
    width: '112px'
  },
  {
    label: '冲裁已配套',
    prop: 'cutQty',
    width: '112px'
  },
  {
    label: '高频已配套',
    prop: 'hfQty',
    width: '112px'
  },
  {
    label: '配套数量',
    prop: 'spQty',
    width: '112px'
  }
])

const tableHeader3 = ref([
  {
    label: '部位',
    prop: 'partName'
  },
  {
    label: '制程',
    prop: 'processCode'
  },
  {
    label: '已制/已缴数量',
    prop: 'prodQty'
  },
  {
    label: '未制/未缴数量',
    prop: 'unProdQty'
  }
])

const Launchform = (row: any) => {
  SubjectDataParameter.value.lotNo = row[0].inputValue
  SubjectDataParameter.value.style = row[1].inputValue

  SubjectDataParameter.value.allFlag1 = row[2].checked === true ? 1 : ''
  SubjectDataParameter.value.allFlag2 = row[3].checked === true ? 1 : ''
  SubjectDataParameter.value.allFlag3 = row[4].checked === true ? 1 : ''

  GetSubjectData()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    // Add other conditions for different form item types
  })
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped>
// 整体
.container {
  width: 100%;
  margin-top: 5px;
}

// 卡片
.containerCard {
  width: 100%;
  box-shadow: none;
}

//主体 左
.containerCardLeft {
  width: 40%;
  height: 670px;

  .containerCardLeftHeaderP {
    width: 159px;
    color: #0482ff;
    font-size: 12px;
    line-height: 20px;
    margin-left: 80px;
  }

  .containerCardLeftHeaderDiv {
    width: 200px;
    display: flex;
    margin-left: 20px;
  }
}

// 主体 中
.containerCardMain {
  width: 35%;
  margin-top: 10px;
}

// 主体 右
.containerCardRight {
  width: 25%;
}

.containerCardLeftHeader {
  margin-top: 10px;
  display: flex;
}

.containerCardLeftHeaderDivP {
  margin-left: 50px;
}

//H1文字 大小
.containerCardLeftHeaderH1 {
  width: 100px;
  font-size: 16px;
  margin-left: 20px;
  margin-bottom: 33px;
}

// 右侧表格
.containerCardRightDiv {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  width: 70%;
}

// 底部表格
.bottom {
  display: flex;
  justify-content: right;
}
</style>
